import { PureComponent } from 'react';
import { exportFile } from 'table-xlsx';

import { TableC, PrimaryC, SecondHeaderC } from '@/src/comps';
import './index.less';

export default class SettingOverallStyle extends PureComponent {
  getColumn = () => {
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
      },
    ];
    return columns;
  };

  getData = () => {
    const dataSource = [
      {
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号',
      },
      {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号',
      },
    ];
    return dataSource;
  };

  onExportFileClick = () => {
    exportFile({
      fileName: '设置整体样式导出.xlsx', // 文件名
      columns: this.getColumn(), // 表格columns
      dataSource: this.getData(), // 表格dataSource
      cellStyle: {
        borderColorRgb: 'ff8064', // 边框
      },
      headerCellStyle: {
        fontColorRgb: 'FF8040', // header行的字体颜色
        fillFgColorRgb: 'e8efff', // header行的填充颜色
      },
      bodyCellStyle: {
        fillFgColorRgb: 'EEEEE0', // body行的填充颜色
      },
    });
  };

  render() {
    return (
      <div className='SettingOverallStyle'>
        <SecondHeaderC title='设置整体样式导出' />
        <PrimaryC title='导出' onClick={() => this.onExportFileClick()} />
        <div>
          <TableC dataSource={this.getData()} columns={this.getColumn()} bordered size='small' hidePage />
        </div>
      </div>
    );
  }
}
